<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结合post请求的ajax请求和序列化封装优化</title>
</head>
<body>
    <script>
        ajax("POST","./05_ajax_second.php",function(data){
            console.log(data);
        },{
            un:"kuiya",
            ps:"666"
        })


        // 一、结合post请求的ajax请求封装优化
        function ajax(method,url,callback,dataObj){
            var xhr = new XMLHttpRequest();
            // 1.open处根据请求类型判断第二个参数是否进行序列化
            xhr.open(method,method.toUpperCase() ==="GET" ? formate(url,dataObj) : url);
            // 2.根据请求类型判断是否需要设置请求头
            if(method.toUpperCase()==="POST"){
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            }
            // 3.根据类型判断是否需要在send方法里添加参数
            xhr.send(method.toUpperCase() ==="POST" ? formate(dataObj) : '');
            xhr.onreadystatechange = () =>{
                if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
                    callback(xhr.responseText);
                }
            }
        }

        // 二、结合post请求的url和dataObj的序列化封装优化
        function formate(url,dataObj){
            var start = true;
            var type = "GET";
            // 1.判断类型进行参数设置
            /* post请求时，只需要进行参数拼接，故只需要传入dataObj，这时url赋值给dataObj,url赋值为null，并给类型type为POST*/
            if(typeof url === 'object' && !(url instanceof Array)){
                dataObj = url;
                url = '';
                type = "POST";
            }

            // 2.参数拼接
            for(var key in dataObj){
                // get请求
                if(type === "GET"){
                    url += (start?"?":"&")+key+"="+dataObj[key];
                // post请求
                }else{
                    url += (start?"":"&")+key+"="+dataObj[key];
                }
                start = false;
            }
            return url;
        }
    </script>
</body>
</html>